<template>
  <div>这是详情页面 - {{ id }} - <button>猜你喜欢</button></div>
</template>

<script>
export default {
  // 进入动态路由页面以后，拿到id，并且用id去做数据请求
  data() {
    return {
      id: "",
    };
  },
  created() {
    // this.$route表示当前路由的路由信息，是一个对象，里面包含跟url相关的信息
    console.log(this.$route.params.id);
    this.id = this.$route.params.id;
  },
  // 如果只改变动态参数，组件将会复用，不会销毁和重新创建，生命周期就不会再次执行
  // 需要使用watch $route的方式去监听动态参数的改变
  watch: {
    $route(to) {
      // console.log(val);
      // console.log(oldVal);
      this.id = to.params.id;
    },
  },
};
</script>
